<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>跟团游订单详情</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap Icons -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">
    <style>
        @media print {
            .no-print {
                display: none !important;
            }
            .page-break {
                page-break-after: always;
            }
        }
        .header-logo {
            width: 120px;
            height: 120px;
            object-fit: contain;
        }
        /* 紧凑型样式 */
        .card {
            margin-bottom: 0.75rem !important;
        }
        .card-body {
            padding: 0.75rem !important;
        }
        .card-header {
            padding: 0.5rem 0.75rem !important;
        }
        .mb-3 {
            margin-bottom: 0.5rem !important;
        }
        .mb-4 {
            margin-bottom: 0.75rem !important;
        }
        .form-label {
            margin-bottom: 0.25rem !important;
            font-size: 0.875rem;
        }
        /* 表格紧凑样式 */
        .table {
            font-size: 0.875rem;
            margin-bottom: 0.5rem !important;
        }
        .table th, .table td {
            padding: 0.25rem 0.5rem !important;
        }
        /* 文字样式 */
        body {
            font-size: 0.875rem;
        }
        h5.mb-0 {
            font-size: 1rem;
        }
        h6 {
            font-size: 0.875rem;
            margin-bottom: 0.5rem !important;
        }
        p {
            margin-bottom: 0.25rem !important;
        }
    </style>
</head>
<body>
    <div id="app" class="container mt-4">
        <!-- 操作按钮 -->
        <div class="mb-4 no-print">
            <button class="btn btn-primary me-2" @click="handlePrint">
                <i class="bi bi-printer"></i> 打印
            </button>
            <button class="btn btn-success me-2" @click="handleEmail">
                <i class="bi bi-envelope"></i> 发送邮件
            </button>
            <button class="btn btn-info me-2" @click="handleGeneratePDF">
                <i class="bi bi-file-pdf"></i> 生成PDF
            </button>
            <button class="btn btn-warning me-2" @click="openSimpleConfirmation">
                <i class="bi bi-file-text"></i> 精简确认单
            </button>
            <button class="btn btn-danger me-2" @click="handleElevyOrder">
                <i class="bi bi-receipt"></i> Elevy下单
            </button>
            <button class="btn btn-secondary me-2" @click="openSimpleQuotation">
                <i class="bi bi-file-earmark-text"></i> 精简报价单
            </button>
            <button class="btn btn-dark me-2" @click="openSimpleReceipt">
                <i class="bi bi-file-earmark-check"></i> 精简收据
            </button>
            <button class="btn btn-secondary" @click="window.close()">
                <i class="bi bi-x-circle"></i> 关闭
            </button>
        </div>

        <!-- 工作区抬头信息 -->
        <div class="card mb-4">
            <div class="card-body">
                <div class="row align-items-center">
                    <div class="col-auto">
                        <img :src="getLogoUrl(workArea.PDFLogoUrl)" class="header-logo" v-if="workArea.PDFLogoUrl">
                    </div>
                    <div class="col">
                        <h2>{{ workArea.PDFName }}</h2>
                        <p class="mb-1"><i class="bi bi-geo-alt"></i> {{ workArea.PDFAddress }}</p>
                        <p class="mb-1"><i class="bi bi-person"></i> 联系人：{{ workArea.PDFContactName }}</p>
                        <p class="mb-1"><i class="bi bi-telephone"></i> 电话：{{ workArea.PDFTelNo }}</p>
                        <p class="mb-0"><i class="bi bi-envelope"></i> Email：{{ workArea.PDFEmail }}</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- 订单基本信息 -->
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="mb-0">订单基本信息</h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-3 mb-3">
                        <label class="form-label">订单编号</label>
                        <div>{{ order.order_number }}</div>
                    </div>
                    <div class="col-md-3 mb-3">
                        <label class="form-label">订单标题</label>
                        <div>{{ order.title }}</div>
                    </div>
                    <div class="col-md-3 mb-3">
                        <label class="form-label">总人数</label>
                        <div>{{ order.total_people }} 人</div>
                    </div>
                    <div class="col-md-3 mb-3">
                        <label class="form-label">订单状态</label>
                        <div>{{ getStatusText(order.status) }}</div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-3 mb-3">
                        <label class="form-label">开始日期</label>
                        <div>{{ formatDate(order.start_date) }}</div>
                    </div>
                    <div class="col-md-3 mb-3">
                        <label class="form-label">结束日期</label>
                        <div>{{ formatDate(order.end_date) }}</div>
                    </div>
                    <div class="col-md-3 mb-3">
                        <label class="form-label">税率</label>
                        <div>{{ formatPercent(order.tax_rate) }}</div>
                    </div>
                    <div class="col-md-3 mb-3">
                        <label class="form-label">印花税金额</label>
                        <div>{{ formatPrice(order.elevy_stamp_amount) }}</div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-3 mb-3">
                        <label class="form-label">客户姓名</label>
                        <div>{{ order.customer_name }}</div>
                    </div>
                    <div class="col-md-3 mb-3">
                        <label class="form-label">客户电话</label>
                        <div>{{ order.customer_phone }}</div>
                    </div>
                    <div class="col-md-3 mb-3">
                        <label class="form-label">客户邮箱</label>
                        <div>{{ order.customer_email || '-' }}</div>
                    </div>
                    <div class="col-md-3 mb-3">
                        <label class="form-label">客户公司</label>
                        <div>{{ order.customer_company || '-' }}</div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-4 mb-3">
                        <label class="form-label">内部备注</label>
                        <div>{{ order.internal_notes || '-' }}</div>
                    </div>
                    <div class="col-md-4 mb-3">
                        <label class="form-label">客户备注</label>
                        <div>{{ order.customer_notes || '-' }}</div>
                    </div>
                    <div class="col-md-4 mb-3">
                        <label class="form-label">条款和条件</label>
                        <div>{{ order.terms_conditions || '-' }}</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 机票订单信息 -->
        <div class="card mb-4" v-if="airticketOrders.length > 0">
            <div class="card-header">
                <h5 class="mb-0">机票订单信息</h5>
            </div>
            <div class="card-body">
                <div v-for="order in airticketOrders" :key="order.ID" class="mb-4">
                    <div class="row mb-3">
                        <div class="col-md-3">
                            <label class="form-label">预订记录</label>
                            <div>{{ order.BookRecordName }}</div>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">办公室编号</label>
                            <div>{{ order.OfficeNo }}</div>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">票类型</label>
                            <div>{{ order.TicketType }}</div>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">总价</label>
                            <div>{{ formatPrice(order.TotalPrice) }}</div>
                        </div>
                    </div>
                    
                    <!-- 航班信息 -->
                    <div class="table-responsive mb-3">
                        <h6>航班信息</h6>
                        <table class="table table-sm table-bordered">
                            <thead>
                                <tr>
                                    <th>航班号</th>
                                    <th>舱位代码</th>
                                    <th>出发城市</th>
                                    <th>出发机场</th>
                                    <th>到达城市</th>
                                    <th>到达机场</th>
                                    <th>出发时间</th>
                                    <th>到达时间</th>
                                    <th>基础价格</th>
                                    <th>票价</th>
                                    <th>折扣率</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="flight in order.flights" :key="flight.ID">
                                    <td>{{ flight.FlightNo }}</td>
                                    <td>{{ flight.CabinCode }}</td>
                                    <td>{{ flight.DepCityName }}</td>
                                    <td>{{ flight.DepAirportCode }}</td>
                                    <td>{{ flight.ArrCityName }}</td>
                                    <td>{{ flight.ArrAirportCode }}</td>
                                    <td>{{ formatDateTime(flight.DepDTS) }}</td>
                                    <td>{{ formatDateTime(flight.ArrDTS) }}</td>
                                    <td>{{ formatPrice(flight.BasePrice) }}</td>
                                    <td>{{ formatPrice(flight.TicketPrice) }}</td>
                                    <td>{{ formatPercent(flight.DiscountRate) }}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    
                    <!-- 乘客信息 -->
                    <div class="table-responsive">
                        <h6>乘客信息</h6>
                        <table class="table table-sm table-bordered">
                            <thead>
                                <tr>
                                    <th>姓名</th>
                                    <th>乘客类型</th>
                                    <th>证件类型</th>
                                    <th>证件号码</th>
                                    <th>出生日期</th>
                                    <th>票价</th>
                                    <th>机场税</th>
                                    <th>燃油税</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="passenger in order.passengers" :key="passenger.ID">
                                    <td>{{ passenger.PassengerName }}</td>
                                    <td>{{ getPassengerTypeText(passenger.PassengerType) }}</td>
                                    <td>{{ getCertificateTypeText(passenger.CertificateType) }}</td>
                                    <td>{{ passenger.CertificateNo }}</td>
                                    <td>{{ formatDate(passenger.Birthday) }}</td>
                                    <td>{{ formatPrice(passenger.TicketPrice) }}</td>
                                    <td>{{ formatPrice(passenger.AirportTax) }}</td>
                                    <td>{{ formatPrice(passenger.FuelTax) }}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <hr v-if="!isLastItem(airticketOrders, order)">
                </div>
            </div>
        </div>

        <!-- 酒店订单信息 -->
        <div class="card mb-4" v-if="hotelOrders.length > 0">
            <div class="card-header">
                <h5 class="mb-0">酒店订单信息</h5>
            </div>
            <div class="card-body">
                <div v-for="order in hotelOrders" :key="order.ID" class="mb-4">
                    <div class="row mb-3">
                        <div class="col-md-3">
                            <label class="form-label">城市</label>
                            <div>{{ order.CityName }}</div>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">酒店名称</label>
                            <div>{{ order.HotelName }}</div>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">房型</label>
                            <div>{{ order.RoomType }}</div>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">房间数量</label>
                            <div>{{ order.BookRoomCount }} 间</div>
                        </div>
                    </div>

                    <div class="row mb-3">
                        <div class="col-md-3">
                            <label class="form-label">入住日期</label>
                            <div>{{ formatDate(order.CheckInTime) }}</div>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">入住天数</label>
                            <div>{{ order.StayDayCount }} 晚</div>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">每晚房价</label>
                            <div>{{ formatPrice(order.RoomUnitPrice) }}</div>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">总金额</label>
                            <div>{{ formatPrice(order.TotalPrice) }}</div>
                        </div>
                    </div>

                    <!-- 入住人信息 -->
                    <div class="table-responsive">
                        <h6>入住人信息</h6>
                        <table class="table table-sm table-bordered">
                            <thead>
                                <tr>
                                    <th>姓名</th>
                                    <th>证件类型</th>
                                    <th>证件号码</th>
                                    <th>出生日期</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="passenger in order.passengers" :key="passenger.ID">
                                    <td>{{ passenger.Name }}</td>
                                    <td>{{ getCertificateTypeText(passenger.CertificateType) }}</td>
                                    <td>{{ passenger.CertificateNo }}</td>
                                    <td>{{ formatDate(passenger.BirthdayDTS) }}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <hr v-if="!isLastItem(hotelOrders, order)">
                </div>
            </div>
        </div>

        <!-- 租车订单信息 -->
        <div class="card mb-4" v-if="vehicleRentals.length > 0">
            <div class="card-header">
                <h5 class="mb-0">租车订单信息</h5>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-sm table-bordered">
                        <thead>
                            <tr>
                                <th>车辆类型</th>
                                <th>数量</th>
                                <th>租用日期</th>
                                <th>租用天数</th>
                                <th>每日租金</th>
                                <th>总金额</th>
                                <th>取车地点</th>
                                <th>还车地点</th>
                                <th>备注</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="order in vehicleRentals" :key="order.ID">
                                <td>{{ order.vehicle_type }}</td>
                                <td>{{ order.quantity }}</td>
                                <td>{{ formatDate(order.start_date) }} - {{ formatDate(order.end_date) }}</td>
                                <td>{{ order.rental_days }} 天</td>
                                <td>{{ formatPrice(order.daily_rate) }}</td>
                                <td>{{ formatPrice(order.total_amount) }}</td>
                                <td>{{ order.pickup_location }}</td>
                                <td>{{ order.return_location }}</td>
                                <td>{{ order.notes || '-' }}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- 景点门票订单信息 -->
        <div class="card mb-4" v-if="ticketOrders.length > 0">
            <div class="card-header">
                <h5 class="mb-0">景点门票订单信息</h5>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-sm table-bordered">
                        <thead>
                            <tr>
                                <th>景点名称</th>
                                <th>门票类型</th>
                                <th>使用日期</th>
                                <th>数量</th>
                                <th>单价</th>
                                <th>总金额</th>
                                <th>预订状态</th>
                                <th>联系人</th>
                                <th>备注</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="order in ticketOrders" :key="order.ID">
                                <td>{{ order.attraction_name }}</td>
                                <td>{{ order.ticket_type }}</td>
                                <td>{{ formatDate(order.visit_date) }}</td>
                                <td>{{ order.quantity }} 张</td>
                                <td>{{ formatPrice(order.unit_price) }}</td>
                                <td>{{ formatPrice(order.total_amount) }}</td>
                                <td>{{ getStatusText(order.status) }}</td>
                                <td>{{ order.contact_name }}</td>
                                <td>{{ order.notes || '-' }}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- 餐饮订单信息 -->
        <div class="card mb-4" v-if="restaurantOrders.length > 0">
            <div class="card-header">
                <h5 class="mb-0">餐饮订单信息</h5>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-sm table-bordered">
                        <thead>
                            <tr>
                                <th>餐厅名称</th>
                                <th>用餐日期</th>
                                <th>用餐时段</th>
                                <th>人数</th>
                                <th>人均消费</th>
                                <th>总金额</th>
                                <th>备注</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="order in restaurantOrders" :key="order.ID">
                                <td>{{ order.restaurant_name }}</td>
                                <td>{{ formatDate(order.dining_date) }}</td>
                                <td>{{ order.dining_period }}</td>
                                <td>{{ order.number_of_people }} 人</td>
                                <td>{{ formatPrice(order.price_per_person) }}</td>
                                <td>{{ formatPrice(order.total_amount) }}</td>
                                <td>{{ order.notes || '-' }}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- 其他订单信息 -->
        <div class="card mb-4" v-if="otherOrders.length > 0">
            <div class="card-header">
                <h5 class="mb-0">其他订单信息</h5>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-sm table-bordered">
                        <thead>
                            <tr>
                                <th>订单类型</th>
                                <th>订单内容</th>
                                <th>单价</th>
                                <th>人数</th>
                                <th>每人数量</th>
                                <th>总金额</th>
                                <th>货币</th>
                                <th>备注</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="order in otherOrders" :key="order.ID">
                                <td>{{ order.OrderType }}</td>
                                <td>{{ order.order_context }}</td>
                                <td>{{ formatPrice(order.UnitPrice) }}</td>
                                <td>{{ order.OrderPeople }}</td>
                                <td>{{ order.OrderPeopleCount }}</td>
                                <td>{{ formatPrice(order.TotalAmount) }}</td>
                                <td>{{ order.Currency }}</td>
                                <td>{{ order.notes || '-' }}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- 客户档案信息 -->
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="mb-0">客户档案信息</h5>
            </div>
            <div class="card-body">
                <p><strong>客户公司：</strong>{{ customerProfile.CompanyName || '-' }}</p>
                <p><strong>地址：</strong>{{ customerProfile.PDFAddress || '-' }}</p>
                <p><strong>联系人：</strong>{{ customerProfile.Name }}</p>
                <p><strong>联系电话：</strong>{{ customerProfile.PDFTelNo }}</p>
            </div>
        </div>

        <!-- 收款账户信息 -->
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="mb-0">收款账户信息</h5>
            </div>
            <div class="card-body">
                <div v-if="workArea.PDFBankInfo">
                    <p v-for="(line, index) in bankInfoLines" 
                       :key="index" 
                       class="mb-1">{{ line }}</p>
                </div>
                <div v-else>暂无收款账户信息</div>
            </div>
        </div>

        <!-- 后续部分将继续添加... -->
    </div>

    <!-- Vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="js/api/config.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                orderId: null,
                workArea: {},
                order: {},
                airticketOrders: [],
                hotelOrders: [],
                vehicleRentals: [],
                ticketOrders: [],
                restaurantOrders: [],
                otherOrders: [],
                customerProfile: {}
            },
            mounted() {
                const urlParams = new URLSearchParams(window.location.search);
                this.orderId = urlParams.get('id');
                if (this.orderId) {
                    this.loadWorkAreaInfo();
                    this.loadOrderDetail();
                }
            },
            methods: {
                async loadWorkAreaInfo() {
                    try {
                        // 从当前用户信息中获取 workarea_id
                        const userStr = localStorage.getItem(API_CONFIG.USER_KEY);
                        const user = JSON.parse(userStr);
                        const workareaId = user.workarea_id;
                        
                        const response = await window.apiClient.get(`/api/workarea/${workareaId}`);
                        this.workArea = response.data;
                    } catch (error) {
                        console.error('加载工作区信息失败:', error);
                        alert('加载工作区信息失败');
                    }
                },
                async loadOrderDetail() {
                    try {
                        const response = await window.apiClient.get(`/api/package-orders/${this.orderId}`);
                        this.order = response.data;
                        if (this.order.customer_profile_id) {
                            await this.loadCustomerProfile(this.order.customer_profile_id);
                        }
                        await this.loadAirticketOrders();
                        await this.loadHotelOrders();
                        await this.loadVehicleRentals();
                        await this.loadTicketOrders();
                        await this.loadRestaurantOrders();
                        await this.loadOtherOrders();
                    } catch (error) {
                        console.error('加载订单详情失败:', error);
                        alert('加载订单详情失败');
                    }
                },
                async loadCustomerProfile(customerId) {
                    try {
                        const response = await window.apiClient.get(`/api/customers/${customerId}`);
                        this.customerProfile = response.data;
                    } catch (error) {
                        console.error('加载客户档案失败:', error);
                        alert('加载客户档案失败');
                    }
                },
                async loadAirticketOrders() {
                    try {
                        const response = await window.apiClient.get('/api/airticket-orders', {
                            params: {
                                package_order_id: this.orderId
                            }
                        });
                        this.airticketOrders = Array.isArray(response.data) ? response.data : [];
                        
                        for (const order of this.airticketOrders) {
                            const [flightsRes, passengersRes] = await Promise.all([
                                window.apiClient.get(`/api/airticket/orders/${order.ID}/flights`),
                                window.apiClient.get(`/api/airticket/orders/${order.ID}/passengers`)
                            ]);
                            order.flights = Array.isArray(flightsRes.data) ? flightsRes.data : [];
                            order.passengers = Array.isArray(passengersRes.data) ? passengersRes.data : [];
                        }
                    } catch (error) {
                        console.error('加载机票订单失败:', error);
                        alert('加载机票订单失败');
                    }
                },
                async loadHotelOrders() {
                    try {
                        const response = await window.apiClient.get('/api/hotel-orders', {
                            params: {
                                package_order_id: this.orderId
                            }
                        });
                        this.hotelOrders = Array.isArray(response.data) ? response.data : [];
                        
                        // 加载每个酒店订单的入住人信息
                        for (const order of this.hotelOrders) {
                            const passengersRes = await window.apiClient.get(`/api/hotel/orders/${order.ID}/passengers`);
                            order.passengers = Array.isArray(passengersRes.data) ? passengersRes.data : [];
                        }
                    } catch (error) {
                        console.error('加载酒店订单失败:', error);
                        alert('加载酒店订单失败');
                    }
                },
                async loadVehicleRentals() {
                    try {
                        const response = await window.apiClient.get('/api/vehicle-rentals', {
                            params: {
                                package_order_id: this.orderId
                            }
                        });
                        this.vehicleRentals = Array.isArray(response.data) ? response.data : [];
                    } catch (error) {
                        console.error('加载租车订单失败:', error);
                        alert('加载租车订单失败');
                    }
                },
                async loadTicketOrders() {
                    try {
                        const response = await window.apiClient.get('/api/attraction-tickets/', {
                            params: {
                                package_order_id: this.orderId
                            }
                        });
                        this.ticketOrders = Array.isArray(response.data) ? response.data : [];
                    } catch (error) {
                        console.error('加载门票订单失败:', error);
                        alert('加载门票订单失败');
                    }
                },
                async loadRestaurantOrders() {
                    try {
                        const response = await window.apiClient.get('/api/meal-orders/', {
                            params: {
                                package_order_id: this.orderId
                            }
                        });
                        this.restaurantOrders = Array.isArray(response.data) ? response.data : [];
                    } catch (error) {
                        console.error('加载餐饮订单失败:', error);
                        alert('加载餐饮订单失败');
                    }
                },
                async loadOtherOrders() {
                    try {
                        const response = await window.apiClient.get('/api/other-orders', {
                            params: {
                                package_order_id: this.orderId
                            }
                        });
                        this.otherOrders = Array.isArray(response.data) ? response.data : [];
                    } catch (error) {
                        console.error('加载其他订单失败:', error);
                        alert('加载其他订单失败');
                    }
                },
                formatDateTime(datetime) {
                    return datetime ? new Date(datetime).toLocaleString('zh-CN') : '-';
                },
                formatDate(date) {
                    return date ? new Date(date).toLocaleDateString('zh-CN') : '-';
                },
                getStatusText(status) {
                    return {
                        'pending': '待确认',
                        'confirmed': '已确认',
                        'cancelled': '已取消'
                    }[status] || status;
                },
                handlePrint() {
                    window.print();
                },
                async handleEmail() {
                    try {
                        await window.apiClient.post(`/api/package-orders/${this.orderId}/send-email`);
                        alert('邮件发送成功！');
                    } catch (error) {
                        console.error('发送邮件失败:', error);
                        alert('发送邮件失败');
                    }
                },
                async handleGeneratePDF() {
                    try {
                        const response = await window.apiClient.get(`/api/package-orders/${this.orderId}/pdf`, {
                            responseType: 'blob'
                        });
                        const url = window.URL.createObjectURL(new Blob([response.data]));
                        const link = document.createElement('a');
                        link.href = url;
                        link.setAttribute('download', `订单${this.orderId}.pdf`);
                        document.body.appendChild(link);
                        link.click();
                        document.body.removeChild(link);
                    } catch (error) {
                        console.error('生成PDF失败:', error);
                        alert('生成PDF失败');
                    }
                },
                formatPrice(price) {
                    return price ? Number(price).toFixed(2) : '0.00';
                },
                formatPercent(value) {
                    return value ? `${(Number(value) * 100).toFixed(1)}%` : '0%';
                },
                getPassengerTypeText(type) {
                    return {
                        'adult': '成人',
                        'child': '儿童',
                        'infant': '婴儿'
                    }[type] || type;
                },
                getCertificateTypeText(type) {
                    return {
                        'passport': '护照',
                        'id_card': '身份证',
                        'other': '其他'
                    }[type] || type;
                },
                isLastItem(array, item) {
                    return array.indexOf(item) === array.length - 1;
                },
                getLogoUrl(logoPath) {
                    if (!logoPath) return '';
                    if (logoPath.startsWith('http://') || logoPath.startsWith('https://')) {
                        return logoPath;
                    }
                    // 采用拼接url的方式： images/workarea_logo_{workarea_id}.png
                    const apiHost = API_CONFIG.API_HOST || 'http://erpapi.hkpublicholiday.com';
                    const logoUrl = `${apiHost}/images/workarea_logo_${this.workArea.ID}.png`;
                    return logoUrl;
                },
                openSimpleConfirmation() {
                    const url = `customer-order-confirmation.html?id=${this.orderId}`;
                    window.open(url, '_blank');
                },
                async handleElevyOrder() {
                    try {
                        const response = await window.apiClient.post(`/api/elevy-stamps/`, {
                            package_order_id: this.orderId
                        });
                        alert('Elevy下单成功！');
                        // 可选：跳转到 Elevy 详情页面
                        window.open(`elevy-management.html?id=${response.data.ID}`, '_blank');
                    } catch (error) {
                        console.error('Elevy下单失败:', error);
                        alert('Elevy下单失败');
                    }
                },
                openSimpleQuotation() {
                    const url = `quotation.html?id=${this.orderId}&type=simple`;
                    window.open(url, '_blank');
                },
                openSimpleReceipt() {
                    const url = `receipt.html?id=${this.orderId}&type=simple`;
                    window.open(url, '_blank');
                }
            },
            computed: {
                bankInfoLines() {
                    return this.workArea.PDFBankInfo ? 
                           this.workArea.PDFBankInfo.split('，') : 
                           [];
                }
            }
        });
    </script>
</body>
</html> 